<!--
 @description 选择方案图片
 @fileName ProgrammePic.vue
 @author zengqiongying
 @created 2024/08/20 17:31:54
-->
<template>
  <div>
    <el-button type="primary" size="mini" @click="handleOpen">选择方案图片</el-button>
    <el-dialog
      ref="refDlg"
      v-el-drag-dialog
      width="800px"
      title="选择方案图片"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      @close="closeDialog"
    >
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="(g,j) in dataList" :key="j" :label="`${g.name} ${getSelectedCount(g)}`" :name="g.code">
            <div class="pic-list">
              <div v-for="(item,i) in g.list" :key="i" :class="['pic-wrap',{'checked':item.selected}]" @click="handleCheck(item)">
                <el-image :src="item.imageUrl | filterImageUrl(adsImgHost)" fit="contain" lazy />
                <img src="@/assets/checked.svg" class="icon-checked">
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeDialog">取 消</el-button>
        <el-button type="primary" size="mini" @click="handleSaveSchemeImage">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryAdsRoomPic } from '@/api/productCombine/scheme'
export default {
  name: 'SelectProgrammePic',
  props: {
    combineId: {
      type: String,
      default: ''
    },
    schemeId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      adsImgHost: process.env.VUE_APP_ADS_STATIC,
      dialogShow: false,
      activeName: '',
      dataList: []
    }
  },
  methods: {
    handleOpen() {
      if (!this.schemeId) {
        this.$message.warning('请先选择关联方案')
        return
      }
      this.dialogShow = true
      this.getDataList()
    },
    closeDialog() {
      this.dialogShow = false
    },
    async getDataList() {
      /*
      for (let k = 0; k < 4; k++) {
        const obj = {
          code: `${k}`,
          name: `户型图${k + 1}`,
          list: []
        }
        for (let i = 0; i < 10; i++) {
          const src = this.formatImageUrl(i % 2 === 0 ? '/group1/M01/01/C5/rB8Mk2IYNquAaqgPAABDfgb_mcA118.jpg' : '/group1/M01/01/EA/rB4Dk2YeJ92AFrH1AAKdmsyAjo8975.jpg')
          obj.list.push(
            { id: `${i}`, src: src, selected: false }
          )
        }
        list.push(obj)
      }*/
      const list = []
      await queryAdsRoomPic(this.schemeId).then(res => {
        const roomList = (res.data && res.data.roomDTOList) || []
        roomList.forEach(room => {
          const panoramaUrl = room.panoramaUrl || ''
          const imgDTOS = room.effectDrawingDTOList || []
          // imgDTOS= {id,imageUrl,programmeId,roomId}
          const obj = {
            code: room.id,
            name: room.roomName,
            list: imgDTOS.map(v => {
              return { ...v, ...{ selected: false, panoramaUrl }}
            })
          }
          list.push(obj)
        })
      })
      this.dataList = list
      this.activeName = list[0].code
    },
    handleClick() {

    },
    handleCheck(item) {
      this.$set(item, 'selected', !item.selected)
    },
    getSelectedCount(g) {
      const l = g.list.filter(v => !!v.selected)
      return l.length > 0 ? `(已选择${l.length})` : ''
    },
    // 保存方案中心图片
    handleSaveSchemeImage() {
      let list = []
      this.dataList.forEach(g => {
        const gList = g.list.filter(v => !!v.selected)
        list = [...list, ...gList]
      })
      this.$emit('change', list)
    }
  }
}

</script>
<style lang='scss' scoped>
/deep/.el-tabs__content{
  max-height: 60vh;
  overflow-y: auto;
}
.pic-list{
  display: flex;
  flex-wrap: wrap;
  .pic-wrap{
    position: relative;
    margin: 0 10px 10px 0;
    width: 235px;
    height: 210px;
    overflow: hidden;
    border: 1px solid #f2f2f2;
    background-color:#f2f2f2;
    box-sizing: border-box;
    .el-image{
      width: 100%;
      height: 100%;
    }
    .icon-checked{
      position: absolute;
      right: 0;
      top: 0;
      width: 36px;
      height: 36px;
      display: none;
    }
    &.checked{
      border-color: #3dc094;
      .icon-checked{
        display: block;
      }
    }

  }
}
</style>
